<template>
  <el-form class="list-b-12 p-12 m-8 bg-color-white" :model="dataInfo.form" label-width="auto" ref="ruleFormRef"
    @submit.prevent="">
    <ElFormItemBox label="复制内容">
      {{ data.copy || '--' }}
    </ElFormItemBox>
    <el-divider border-style="dashed" />
    <ElFormItemBox label="格式化时间">
      <CopyBox data="proxy.$time(new Date())" @copyBtn="copyBtn">
        {{ proxy.$time(data.startTime) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="格式化日期">
      <CopyBox data="proxy.$day(new Date())" @copyBtn="copyBtn">
        {{ proxy.$day(data.startTime) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="格式化日期">
      <CopyBox data="proxy.$formatDate(new Date())" @copyBtn="copyBtn">
        {{ proxy.$formatDate(data.startTime) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="比较两个时间的先后关系">
      <CopyBox data="proxy.$compareDates(startTime,endTime)" hint='表示开始时间早于结束时间；-1表示早于,1 表示晚于；0 表示相同'
        @copyBtn="copyBtn">
        {{ proxy.$compareDates(data.startTime, data.endTime) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="获取两个时间之间的分钟差">
      <CopyBox data="proxy.$getMinutesDifference(startTime,endTime)" @copyBtn="copyBtn">
        {{ proxy.$getMinutesDifference(data.startTime, data.endTime) }}分钟
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="获取某个时间段前的日期">
      <CopyBox data="proxy.$getTimeAgo(1,'day',new Date())" @copyBtn="copyBtn">
        {{ proxy.$getTimeAgo(1, 'day', data.startTime) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="获取星期几名称">
      <CopyBox data="proxy.$getDayName(new Date())" @copyBtn="copyBtn">
        {{ `${proxy.$day(new Date())} ${proxy.$getDayName(new Date())} ${proxy.$formatDate(new Date(), 'HH:mm:ss')}` }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="获取相对时间">
      <CopyBox data="proxy.$getRelativeTime(new Date())" @copyBtn="copyBtn">
        {{ `${proxy.$getRelativeTime(data.startTime)}` }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="获取某个时间加上若干分钟后的新时间">
      <CopyBox data="proxy.$addMinutesToTime(new Date(),30)" @copyBtn="copyBtn">
        {{ `${proxy.$addMinutesToTime(data.startTime, 30)}` }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="计算与目标日期相差的天数">
      <CopyBox data="proxy.$getDaysUntilDeadline(new Date()).dayDiffText" @copyBtn="copyBtn">
        {{ `${proxy.$getDaysUntilDeadline(data.endTime).dayDiffText}` }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="获取两个日期之间的年份差">
      <CopyBox data="proxy.$getYearDifference(startTime)" @copyBtn="copyBtn">
        {{ `今年 ${proxy.$getYearDifference(data.birthday)} 岁` }}
      </CopyBox>
    </ElFormItemBox>
    <el-divider border-style="dashed" />
    <ElFormItemBox label="原始数据">
      <json-viewer :value="data" expanded :copyable="{
        copyText: '复制',
        copiedText: '复制成功',
      }" />
    </ElFormItemBox>
  </el-form>
</template>
<script setup lang="ts">
import { useListComponent } from './pageTs'; // 引入逻辑
const { dataInfo } = useListComponent();
import { reactive, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() as any;
const data = reactive({
  copy: '',
  startTime: '2025-7-1 12:00:00',//开始时间
  endTime: '2025-7-2 12:00:00',//结束时间
  birthday: '1990-10-01',//结束时间
});
const ruleFormRef = ref<HTMLElement | null>(null);
const copyBtn = (text: string) => {
  data.copy = text
};


onMounted(() => { });

onBeforeUnmount(() => { });
</script>